<template>
  <view>
    <uni-nav-bar left-icon="back" :title="data.name" class="fw-b" :border="false" backgroundColor="rgba(0,0,0,0)" @clickLeft="$tools.goBack()">
      <view class="rows rowsm" slot="right" @click="$tools.goNext('/pagesCopy/index/classList')">
        <view class="fs-26 col666 mr-8 fw-n">切换</view>
        <image src="/static/icon_21jt.png" class="w-20 h-20" mode=""></image>
      </view>
    </uni-nav-bar>
    
    <view class="w100 h-76 rowsa rowsm">
      <view class="" @click="active = 0" :class="{'fw-b fs-30':active == 0,'fs-28':active != 0}" :style="active == 0 ? 'color:#4878FF;' : 'color:#888;'">劳动实践类别</view>
      <view class="" @click="active = 1" :class="{'fw-b fs-30':active == 1,'fs-28':active != 1}" :style="active == 1 ? 'color:#4878FF;' : 'color:#888;'">学生列表</view>
    </view>
    
    <view class="w100" v-if="active == 0">
      <view class="w100 h-250 rowscl pl-32 pr-28 mb-20" style="background-color: rgba(72, 120, 255, .06);">
        <view class="fs-28 col000 fw-b mb-20">{{data.njName}}</view>
        <view class="w100 rowsb rowsm mb-20">
          <view class="fs-24 col666">班级人数</view>
          <view class="fs-24 col000">{{data.userCount}}人</view>
        </view>
        <view class="w100 rowsb rowsm mb-20">
          <view class="fs-24 col666">指导老师</view>
          <view class="fs-24 col000">{{data.jsName || ''}}{{ data.jsName? '(' + (data.jsNumber || '') + ')': '' }}</view>
        </view>
        <!-- <view class="w100 rowsb rowsm">
          <view class="fs-24 col666">学生助教</view>
          <view class="fs-24 col000">{{data.xsName || ''}}</view>
        </view> -->
      </view>
      
      <view class="w100 pl-20 pr-20">
        <view class="w100 h-100 br-16 rowsb rowsm pl-24 pr-24 mb-20" style="background-color: #F7F8FA;" @click="$tools.goNext(`/pagesCopy/index/finishDetail?id=${id}&index=0`)">
          <view class="fs-28 fw-b col333">基础劳动</view>
          <view class="rows rowsm">
            <view class="fs-26 col666">已完成 <text style="color: #4878FF;">{{data.jcldJdCount}}</text> 人/未完成<text style="color: #FF9934;">{{data.userCount - data.jcldJdCount}}</text>人</view>
            <image src="/static/icon_21jt.png" class="ml-12 w-20 h-20" mode=""></image>
          </view>
        </view>
        
        <view class="w100 h-100 br-16 rowsb rowsm pl-24 pr-24 mb-20" style="background-color: #F7F8FA;" @click="$tools.goNext(`/pagesCopy/index/finishDetail?id=${id}&index=1`)">
          <view class="fs-28 fw-b col333">劳动总结报告</view>
          <view class="rows rowsm">
            <view class="fs-26 col666">已完成 <text style="color: #4878FF;">{{data.ldzjJdCount}}</text> 人/未完成<text style="color: #FF9934;">{{data.userCount - data.ldzjJdCount}}</text>人</view>
            <image src="/static/icon_21jt.png" class="ml-12 w-20 h-20" mode=""></image>
          </view>
        </view>
        
        <view class="w100 h-100 br-16 rowsb rowsm pl-24 pr-24 mb-20" style="background-color: #F7F8FA;" @click="$tools.goNext(`/pagesCopy/index/finishDetail?id=${id}&index=2`)">
          <view class="fs-28 fw-b col333">劳动成果</view>
          <view class="rows rowsm">
            <view class="fs-26 col666">已完成 <text style="color: #4878FF;">{{data.ldcgJdCount}}</text> 人/未完成<text style="color: #FF9934;">{{data.userCount - data.ldcgJdCount}}</text>人</view>
            <image src="/static/icon_21jt.png" class="ml-12 w-20 h-20" mode=""></image>
          </view>
        </view>
        
        <view class="w100 h-100 br-16 rowsb rowsm pl-24 pr-24 mb-20" style="background-color: #F7F8FA;" @click="$tools.goNext(`/pagesCopy/index/finishDetail?id=${id}&index=3`)">
          <view class="fs-28 fw-b col333">社会公益劳动</view>
          <view class="rows rowsm">
            <view class="fs-26 col666">已完成 <text style="color: #4878FF;">{{data.ldgyJdCount}}</text> 人/未完成<text style="color: #FF9934;">{{data.userCount - data.ldgyJdCount}}</text>人</view>
            <image src="/static/icon_21jt.png" class="ml-12 w-20 h-20" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    
    <view class="w100" v-if="active == 1">
      <view class="w100 h-100 rows rowsm" style="background-color: #F4F7FF;">
        <view class="w-120 h100 rowsc rowsm fs-28 col000">学号</view>
        <view class="w-180 h100 rowsc rowsm fs-28 col000">学生姓名</view>
        <view class="w-180 h100 rowsc rowsm fs-28 col000">进度</view>
        <view class="w-120 h100 rowsc rowsm fs-28 col000">成绩</view>
        <view class="w100 h100 rowsc rowsm fs-28 col000">操作</view>
      </view>
      <view class="w100 h-120 rows rowsm" v-for="(item,index) in list" :key="index" :style="index % 2 == 0 ? 'background-color: #F7F6FA;' : 'background-color: #fff;'" @click="$tools.goNext('/pagesCopy/index/scoreDetail?id=' + item.userId)">
        <view class="w-220 h100 rowsc rowsm fs-28 col000">{{item.stNumber}}</view>
        <view class="w-130 h100 rowsc rowsm fs-28 col000">{{item.name}}</view>
        <view class="w-140 h100 rowsc rowsm fs-28 col000">{{Number(item.countPer).toFixed(2)}}%</view>
        <view class="w-120 h100 rowsc rowsm fs-28 col000">{{Number(item.countCj).toFixed(0)}}</view>
        <view class="w100 h100 rowsc rowsm fs-28 col000">
          <view class="w-96 h-44 br-22 rowsc rowsm fs-24" style="border: 2rpx solid #4878FF;color: #4878FF;" @click.stop="urge(item.userId)">督促</view>
        </view>
      </view>
    </view>
    
    <view class="w-100 h-100 fixed br-50 colfff rowsc rowsm fs-30" style="background: linear-gradient(to bottom,#4897FF,#4878FF);bottom: 100rpx;right: 50rpx;" v-if="active == 1" @click="$tools.goNext('/pagesCopy/index/history')">历史 <br> 督促</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        active:0,
        id:'',
        data:{},
        list:[],
         total:0,
        limit: {
          pageNum: 1,
          pageSize: 20
        },
      };
    },
    onLoad(e) {
      this.id = e.id
      this.getInfo()
      uni.$on('choseClassItem',e => {
        console.log(e)
        this.id = e.id
        this.getInfo()
      })
    },
        // 下拉到底部后加载新数据
    onReachBottom() {
      if (this.list.length < this.total) {
        this.limit.pageNum++;
        this.getInfo()
      }
    },
    onPullDownRefresh() {
      this.limit.pageNum = 1
      this.getInfo()
    },
    onUnload() {
      uni.$off('choseClassItem')
    },
    methods:{
      urge(id){
        this.$tools.axiosFromToken('POST','prouserdc/dcSt',{userId:id,content:'请尽快完成劳动教育课程'},'加载中').then(res => {
          this.$tools.showtt(res.msg)
          if(res.code != 200) return
          // setTimeout(() => {
          //   this.$tools.goBack(1)
          // },1000)
        })
      },
      getInfo(){
        this.$tools.axiosFromToken('POST','prouser/getBjById',{id:this.id},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {data} = res
          this.data = data
        })
        this.$tools.axiosFromToken('POST',`prouser/listSt?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{clId:this.id},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          // let {rows} = res
          // this.list = rows
           this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
        })
      }
    }
  }
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
